<script setup lang="ts">
import { Tabbar, TabbarItem } from 'vant'
import { ref, watch } from 'vue'
import BlindBox from './BlindBox.vue'
import Wish from './Wish.vue'
import './socket'
import { socket } from './socket'

const activeTab = ref('wish')

watch(activeTab, (v) => {
    if (v === 'blind_box') {
        socket.emit('blind_box:get_state')
    }
})
</script>

<template>
    <div class="app">
        <div class="content">
            <div v-show="activeTab === 'wish'" class="scroller">
                <Wish />
            </div>
            <div v-show="activeTab === 'blind_box'" class="scroller">
                <BlindBox />
            </div>
        </div>
        <Tabbar v-model:modelValue="activeTab" :fixed="false" :safeAreaInsetBottom="true">
            <TabbarItem name="wish">许愿</TabbarItem>
            <TabbarItem name="blind_box">盲盒</TabbarItem>
        </Tabbar>
    </div>
</template>

<style lang="scss">
html,
body {
    background-color: var(--van-background);
}
</style>

<style lang="scss" scoped>
.app {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    .content {
        position: relative;
        flex: 1;

        .scroller {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden auto;
        }
    }

    .van-tabbar {
        flex-shrink: 0;
    }
}
</style>
